<template>
  <div>
    <el-icon><Fold /></el-icon>
    <h2>外卖后台管理</h2>

    <el-dropdown>
    <span class="el-dropdown-link" style="background-color: white;color: #6b717f;height:25px;line-height:25px;">
      {{ account }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item>修改信息</el-dropdown-item>
        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

let account='';
let business=reactive({})
let employee=reactive({})
const eToken=sessionStorage.getItem('employeeData');
const bToken=sessionStorage.getItem('businessData');
if(eToken==null&&bToken==null){
}else if(bToken!=null){
  business=JSON.parse(bToken);
  account=business.account;
}else{
  employee=JSON.parse(eToken);
  account=employee.nickname;
}
const logout = () => {
  sessionStorage.removeItem('employeeData');
  sessionStorage.removeItem('businessData');
  window.location.href = '/login';
};
</script>

<style scoped>

div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  color: white;
}

</style>